<!DOCTYPE html> 
<html style="width:100%; height:100%; overflow:hidden;"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Component</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="../../themes/default/nex.css">
        <link rel="stylesheet" href="../../themes/default/form/form.css">
        <link rel="stylesheet" href="../asset/css/style.css">
        <link rel="stylesheet" href="../../themes/default/scroller/scrollbar.css">
        <script src="../../boot.js"></script>
        <script src="../asset/js/jquery.min.js"></script>
        <style type="text/css">
		.nex-form-type-listbox {
			box-shadow: 1px 1px 3px #d1d1d1;	
			
		}
		</style>
    </head>
    <body style="width:100%; height:100%; padding:50px; margin:0; overflow:hidden;">
    <select id="sel">
    	<option selected>...请选择...</option>
        <option>1a</option>
        <option>1b</option>
        <option>1c</option>
        <option>1d</option>
        <option>1e</option>
        <option>1f</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
    </select>
    <input type="text" />
    <style type="text/css">
	.db {
		border:none;
		background-color:transparent;
		color: #000;	
	}
	input.disabled{
border:0px solid #DDD;
background-color:#F5F5F5;
color:red;
min-height:14px;
}
	</style>
    
     <script type="text/javascript">
	 require.config({
		urlArgs : 't='+(+new Date())	 
	 });
	 $(function(){
		 require([
		 	'Nex/data/Store',
		 	'Nex/form/Display',
		 	'Nex/form/Select',
			'Nex/form/Text'
		], function(Store, Display, Select, Text){ 
		
			var items = [];
			
			for( var i=0;i<2000;i++ ) {
				items.push({
					text : 'aaaaaaaaaaaaaaaa'+i,
					value : 'a'+i	
				})	
			}
			
			var store = new Store( {
				loadOnce : true,
				request : function(d, c){
					setTimeout(function(){
						c(items)	
					},2000);	
				},
				//data : items	
			} );
			
			setInterval(function(){
				i++;
				items.push({
					text : 'aaaaaa'+i,
					value : 'a'+i	
				});
				
				select.setItems(items);	
			},100000000);
			
			Display.create({
				renderTo: document.body	 	,
				labelText : '请选择：',
				value : 'aaaaaaaaaaaaaaa',
				width : 200	
			});
			
			text = Text.create({
				renderTo: document.body	 	,
				labelText : '请选择：',
				autoFocus : true,
				triggers : [{
					text : 'X',
					handler : function(){
						this.focus();	
					}	
				}],
				width : 200	
			});
			
			//console.time('s')
			select = Select.create({
				labelText : '请选择：',
				width : 250,
				//multiSelect : true,
				//height : 50,
				items : store,
				triggers : [{
					text : 'A'	
				}],
				dropdownConfig1 : {
					width : 300,
					height : 400	
				},
				dropdownConfig : {
					itemNoWrap : false,
					itemTooltip : {
						enable : true	
					}	
				},
				textFormatter1 : function(t){
					console.log(arguments);
					
					return '----'+t;	
				},
				onLoadSuccess : function(){
					console.log('adfddd')	
					this.val('a1000')
				},
				//value : 'a3',
				//valueText : '12121',
				//dropdownHideToRemove : true,
				//minWidth : 150,
				style : {
					marginTop : 50	
				},
				//readOnly : true,
				':onChange' : function(v){
					console.log(v, $.type(v))	;
				},
				':onFocus' : function(v){
					console.log('onFocusList')	
				},
				':onBlur' : function(v){
					console.log('onBlurList')	
				},
				onClick : function(){
					console.log('adf')	
				},
				renderTo: document.body	 	
			});
			//console.timeEnd('s')
			
		 });	 
	 });
	 </script>
    </body>
</html>
